<template>
    <div class="wrap">
        <el-card class="box-card">
            <div class="box">
                <img class="loginImg" src="../../public/img/_店铺.png" alt="">
                <p class="title">mall-admin-web</p>
                <el-input v-model="userInput" placeholder="请输入用户名"></el-input>
                <el-input v-model="passInput" placeholder="请输入密码" show-password></el-input>
                <!-- <router-link to="" tag="span"> -->
                    <el-button type="primary" @click="login">登录</el-button>
                <!-- </router-link> -->
                <el-button type="primary" >获取体验账号</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default{
        name:"LoginName",
        data() {
            return {
                userInput:localStorage.getItem("userInp")||"",
                passInput:localStorage.getItem("passInp")||"",
            }
        },
        updated(){
            localStorage.setItem("userInp",this.userInput);
            localStorage.setItem("passInp",this.passInput)
        },
        created(){
            localStorage.setItem("token","")
        },
        methods: {
            async login() {
                if(localStorage.getItem("user")===localStorage.getItem("userInp")&&localStorage.getItem("pass")===localStorage.getItem("passInp")){
                    if(!localStorage.getItem("token")){
                        let params = {
                            username: this.userInput,
                            password: this.passInput,
                        };
                        let res = await this.$http.postSyan(params)
                        if (res.status === 200) {
                            if(res.data.data.token){
                                localStorage.setItem('token',res.data.data.token );
                                this.$router.push("/frame")
                                this.$message({
                                    type: 'success',
                                    message: '已登录'
                                });
                            }
                        }
                    }
                }else{
                    alert("密码不正确")
                }
            },
        }
    }
</script>

<style scoped lang="less">
    .wrap{
        width: 390px;
        height: 330px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -250px 0 0 -220px;

    }
    .box{
        height: 330px;
        text-align: center;
    }
    .box div{
        margin: 5px 0; 
    }
    .box button{
        width: 140px;
        margin:10px 15px 0;
    }
    .loginImg{
        width: 70px;
        height: 70px;
        margin-bottom:10px;
    }
    .title{
        color: blue;
        font-size: 24px;
        margin-bottom:10px;
    }.box-card{
        border-top: 10px solid blue;
    }
</style>